<template>
    <div id="lid" v-if="blockstate">
        <div id="altblock">
            <span id="doqr">解码状态</span>
            <img id="errorico" @click="shutdown" src="../../static/error.png" alt="">
            <div v-if="state">
                <el-alert id="topic" title="解码成功" type="success" center show-icon :closable="false"> </el-alert>
                <div id="idword"><span id="midid">{{datacontent}}</span></div>
                 <el-button id="copybut" type="primary" @click="copycontent">&nbsp;&nbsp;&nbsp;复 制&nbsp;&nbsp;&nbsp;</el-button>
            </div>
            <div v-if="!state">
                <el-alert id="topic" title="解码失败" type="error" center show-icon :closable="false"> </el-alert>
                <div id="idword"><span id="midid">二维码错误或已失效</span></div>
                      <el-button id="copybut" type="primary" @click="shutdown">&nbsp;&nbsp;&nbsp;确 定&nbsp;&nbsp;&nbsp;</el-button>
            </div>
        </div>
    </div>
    <div id="mainup">
        <input id="upfile" type="file" @click="upimg">
        <img id="upimg" src="../../static/upfile.png" alt="">
        <div id="upword">上传或拖拽二维码图片到此区域 </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'Upfile',
    data(){
    return{
        blockstate:false,
        state:true,
        img_url:'',
        centerDialogVisible: false,
        datacontent:'',
         imageUrl: ''
}
},
mounted: function () {
        let _this = this;
      var dropbox = document.getElementById('mainup');
      dropbox.addEventListener("drop",this.enentDrop,false)
      dropbox.addEventListener("dragleave",function (e) {
        e.stopPropagation();    //阻止事件冒泡
        e.preventDefault();     //阻止浏览器默认事件
        _this.borderhover =  false;
      })
      dropbox.addEventListener("dragenter",function (e) {
        e.stopPropagation();
        e.preventDefault();
        _this.borderhover =  true;
      })
      dropbox.addEventListener("dragover",function (e) {
        e.stopPropagation();
        e.preventDefault();
        _this.borderhover =  true
      })
    },
        methods:{
    copycontent(){
    let content = this.datacontent;
    var aux = document.createElement("input"); 
    aux.setAttribute("value", content); 
    document.body.appendChild(aux); 
    aux.select();
    document.execCommand("copy"); 
    document.body.removeChild(aux);
    this.$notify({
          title: '成功',
          message: '内容已被复制到剪切板',
          type: 'success'
        });
    },
    enentDrop: function(e){
        this.borderhover = false
        e.stopPropagation();
        e.preventDefault();   
        let fileData = e.dataTransfer.files[0];
        console.log(fileData);
        this.upfile(fileData);
      },
    shutdown(){
        this.blockstate=false;
    },
    upimg(e){
        let input = document.getElementById('upfile')
			//当选择了图片文件或文件发生改变时出发'fileImg'的onchange事件函数。
                  input.onchange=(e)=>{

                    let file = e.target.files[0];
                    this.upfile(file);
                  
    }
},
upfile(file){
            let param = new FormData(); //创建form对象
                    param.append('qrImg',file);//通过append向form对象添加数据
                    // window.console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                    let config = {
                        headers:{'Content-Type':'multipart/form-data'} //Content-Type不一定是这个值，同时后台也可以选择只接收的图片类型
                            //    headers:{'Content-Type':'image/png,image/jpg'}
                    }; //添加请求头
                    axios.post('http://6rm52f.natappfree.cc/Analysis/Result',param,config)
                        .then(response=>{
                            window.console.log(response.data)
                        this.datacontent=response.data;
                    if(this.datacontent==''){
                            this.blockstate=true;
                            this.state=false;
                        }
                    else{
                            this.blockstate=true;
                            this.state=true;
                        }
                        })
                        .catch(error => {
                             this.$message.error('网络似乎有一些错误哦');
                            window.console.log(error)
                        })


}
        }
}
</script>

<style>
#midid{
    position: absolute;
    top:48%;
    left:50%;
    transform: translate(-50%,-50%);
}
#copybut{
    position: absolute;
    top:80%;
    left:50.5%;
    transform: translate(-50%,-50%);
}
.el-alert--success.is-light {
    background-color: transparent !important;
}
.el-alert--error.is-light {
    background-color: transparent !important;
}
.el-alert__title{
    font-weight: 400;
    font-size:20px;
}
.el-alert__icon,.el-icon-success{
    margin-right: 10px;
    font-size:27px;
}
#topic{
    position: relative;
    top:5px;
}
#errorico{
    position: relative;
    left: 900px;
    transform: scale(0.7);
}
#altblock{
    position: absolute;
    width: 1100px;
    height: 380px;
    background-color: #FFFFFF;
    transform: translate(-50%,-50%);
    top:45%;
    left:52%
}
#lid{
    position: absolute;
    top: -60px;
    width: 100%;
    height: 110%;
    background-color: rgba(0,0,0,0.6);
    z-index: 999;
    /* display: none; */
}
#idword{
     position: absolute;
    top:48%;
    left:51%;
    transform: translate(-50%,-50%);
    width: 800px;
    height: 80px;
    overflow-y:scroll;
    overflow-x:hidden;
    background-color: #F1F4F8;
}
#doqr{
    position: relative;
    top:-25px;
    margin: 30px;
    opacity: 0.9;
}
#mainup{
    position: relative;
    left: 290px;
    top:50px;
    width: 1010px;
    height: 300px;
    background-color: #FFFFFF;
    display: flex;
    margin-bottom:330px ;
}
#upimg{
    position: absolute;
    top:30%;
    left: 48%;
    /* transform: ; */
    transform:scale(0.5) translate(-50%,-50%);
}
#upword{
      position: absolute;
    top:55%;
    left: 50%;
    color:#333333;
    transform:translate(-50%,-50%);
    opacity: 0.9;
}
#upfile{
    position: absolute;
    top:100px;
    left:320px;
   font-size: 50px;
    z-index: 100;
    opacity: 0;
}
/*  */
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>